<template>
  <div class="index">
    <!-- 底部导航 -->
    <!-- <sakura /> -->
    <div class="menu">
      <div class="menu_content mt30">
        <el-menu :default-active="activeIndex" class="nav-index" mode="horizontal">
          <component
            v-for="(item,index) in menu"
            :key="index"
            :is="item.el"
            :index="item.key"
            @click="onPath(item)"
          >
            <template v-if="item.el === 'el-submenu'" slot="title">{{ item.label }}</template>
            <span v-else>{{ item.label }}</span>
            <component
              v-for="subitem in item.children"
              :key="subitem.key"
              :is="subitem.el"
              :index="subitem.key"
              @click.native.stop="onPath(subitem)"
            >{{ subitem.title }}</component>
          </component>
        </el-menu>
      </div>
      <div class="text">
        <p>不闻不若闻之，</p>
        <p>闻之不若见之，</p>
        <p>见之不若知之，</p>
        <p>知之不若行之。</p>
        <p>学至于行之而止矣。</p>
      </div>
      <div>
        <Footer style="position: inherit;" />
      </div>
    </div>
  </div>
</template>
<script>
// import sakura from '@/components/sakura'
import { menuList } from '@/utils/menu.js'
import Footer from '@/components/footer.vue'
export default {
  components: {
    // sakura
    Footer
  },
  data() {
    return {
      menu: menuList,
      activeIndex: '1'
    }
  },
  mounted() {
    this.$store.commit('SET_MENU', this.menu)
    console.log('log', process.env.VUE_APP_CODE_URL);
    // this.$store.dispatch('asyncMenu', this.menu)
  },
  methods: {
    onJump({path = '/web/html/intro'}) {
      console.log(path)
      this.$router.push({
        path: path
      })
    },
    onPath(item) {
      window.open(`${window.location.origin}/#/${item.path}`,'_top')
    }
  }
}
</script>

<style lang="scss" scoped>
.index{
  height: 100%;
  width: 100%;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.menu{
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .menu_content{
    span{
      cursor: pointer;
    }
  }
  .mt30{
    margin-top: 30px;
  }
  .mr30{
    margin-right: 30px;
  }
  .text{
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 10px;
    margin-bottom: 65px;
  }
}
::v-deep .nav-index{
  border: 0;
  &>.el-menu-item{
    height: auto;
    line-height: 1.8;
    padding: 0 10px;
    color: #333;
    font-size: 16px;
  }
  &>.el-submenu{
    .el-submenu__title{
      height: auto;
      line-height: 1.8;
      padding: 0 10px;
      color: #333;
      font-size: 16px;
    }
  }
}
</style>